4 
4 
4 | 
1 
ا 


arabic formation 


مد خل إلى الإکس ام أل 


(XML , DTD ,CSS, XSL) 


من إعداد : خالد السعداين 


2 


arabic formatlon 


كنب للمؤلفا: 
سبيلك المختصر لتعلم السي شارب م٣ةئ€‏ 
۰ 
۰ 
مدخل إلى الداتا أكسيس لاير | 
٠‏ 
| 
تعلم كيف تصنع ك "٠٤۴۴3‏ متطور عن طريق الفيجوال بسيك 
تحزمم برامج عامل/خادم في الفيجوال ستوديو (متوفر بالفرنسية) 


مدخل إلى الإكس - آم - أل 


7۳ 
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لماه عن الكاثب 


الإإسم الكامل : خالد السعداي 
الماتف :0673-07-51-05 


Ll 
۵ 
| 
| 
| 
[ 
| 
[ 


من مواليد 18/05/1989 بمدينة الفقيه بن صاخ › المغرب 

تقني متخصص في التنمية المعلوماتية 

الاعات اة ٠‏ ال هة ب 

VB.NET, C#.NET, C++, C, JAVA(J2EE) 

وبالنسبة للويب : 

ASP.NET, PHP, HTML, JAVASCRIPT, AJAX, CSS, JQUERY, XML 
: آما قراعك البيانات‎ 


MS ACCESS, MS SQL SERVER, MYSQL 


ي 


u 
1 


7۳ 
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بسم الله الرحمان الرحيم 


أحبابي الأفاضل› 


نظرا لقلة المراحع والدروس العربية الي تتحدث عن 1× و توابعه» ارتأيت أن أحر ج عن سياق السلسلة 
التربوية والمعرفية "كن أسدا" بغرض سد هذه الثغرة ولو معلومات ضغيلة ف انتظار تأليف مرحع شامل» على 
العموم فهذا العمل المتواضع كاف لسد حاحيات المتطلعين إلى معرفة 01× و 0۲0 و ا5× . 
وح یکون النفع کبیرا نصح بأن یکون القارئ على اطلاع باساسیات ۸1۲۸۷1 حن لا يلقى أي صعوبات ي 
الفهم. 

ولا ننسى كما حرت العادة أن ننبهكم إلى أن "لكل شيء إذا ما تم نقصان" » فأدنن حطأً تتمكنون من 
العثور عليه بين طيات الكتاب لا تتوانوا ق إرشادنا إليه ولكم منا حزيل الشكر . 

أتوقف عند هذا الحد حي لا أكون ضيفا ثقيلاء و أنمن لك -أيها القارئء- مسيرة موفقة في حياتك» 


واللهم انصر اللإإسلام و المسلمين ! 


خالد السعدای 


۳ 
ا 


arabic formation 


"یا أیها الین أمدوا افوا الله و قولوا 
قولا سدیدا. صلخ لکم اعمالکم و عفر لکم 
دنوبکم ومن یط٤‏ الله و رسوله فف فار 
فورا عطيما" 


الأحزاب :70 و71 


arabic formatlon 


للمراسلة من أجل طرو الاعلراعان والعاا حطان 


و السا uan u‏ لک عواسا الالکار وس : 


ص 
۵ 


Khalid ESSAADANI@Hotmail.fr 


بست الله على بر كة الله 


00ا ت 


arabic formatlon 


f 


مصطلح ۷1× ہو احتصار ل Extensible Marquap Lang ua g€‏ إذا ما قمنا بترججمة حرفية هذه 


العبارة فسنحصل على "لغة الوسوم الإمتدادية" .... © وماذا يعن ذلك؟؟؟؟؟ 


حسناء إذا كنت على اطلاع بيرجة المواقع وسبق لك أن احتككت بشيء امه 1۲١1‏ فأنا على يقين بأنك 


تعرف ماهو الوسم (بالفرنسية عءااج8 وبالإبحليزية 128 )»› نفس الأمر ف ا× فهي لغة مبنية على الوسوم.. 


مغال لوسم في ۷1 1۲. 


<center> Ce texte sera affiché dans le centre </center> 


كما تلاحظ فإن الوسم له بداية وماية وبين البداية و النهاية نضع العبارة الي نريد تطبيق الوسم عليها. 
© رعا فهمنا معن الوسوم لكن ماذا تقصد ب "الإمتدادية" ؟؟؟؟ 


تختلف الوسوم قي ×١‏ عن الوسوم في 1۲1 قي كون هذه الأخيرة ثابتة ولاتسمح لنا بإنشاء وسوم حسب 


رغبتناء أما 1× فتمنح للمستعمل القدرة على إنشاء وسوم خحاصة به وهذا ما يقصد بالوسوم الإمتدادية. 


:XML متطلبات‎ 


لإنشاء ملف ۷1× سنحتاج إلى حرر نصوص مثل N0‏ ها8 المرفقة مع sس0wلہW‏ وإلى متصفح من أحل 
مشاهدة النتائج. 
الغرض من ۷1× هو حفظ البيانات ونقلها بطرق سلسة» ويتوفر ملف ۷1× على بنية شجرية تنازلية» حيث 


7۳ 
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2 


وحن نستوعب المثال جيدا» لنفترض أن لدينا قاعدة بيانات ط0 تسمی ۷٥۸۵‏ تتوفر على حدول اسمه 


ماAi‏ » هذا الأحير الذي يتوفر بدوره على الحقول التالية: 


© رقم المنتج 
© اسم المنتج 


ای ف ات م 


قاعدة البيانات ع" ve‏ 


Code Article Libelle Article 


Clavier 
8 أ‎ 


_Souris 
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من أحل إنشاء ملف ا"× مناسب فإن الكود سيكون هكذا: 


COX VvEEEIORST ID 
<vente> 
<articles> 
TAFE lES 
EO ll Code. 
<libelle>clavier</libelle> 
TS 


CEG 


بالنسبة للسطر الأول فغرضه هو إعلام المتصفح بأن ما نحن بصدد عرضه هو عبارة عن xml‏ 

ملاحظة: 

يجب الأخحذ بعين الإعتبار حالة أحرف الوسوم كعءااةط وها فهناك فرق بين الحروف الصغيرة والكبيرة. 
كما لايصح استعمال بعض الرموز ك & و > وغيرهاء ولكن يتم تعويضها معا يلي: 


° KU س ڪڪ‎ Samp: 


8t;‏ س ڪڪ > هه 
Et‏ چ يڪ < ° 


;0مھ ی ° 
;tاguo&‏ > ج ڪڪ `" ° 


arabic formation 


أي أن الشفرة التالية خحاطئة: 


<code> 3>2 </code> 


والصحيح هو: 


<code> 3&gt;2 </code> 


وهذا مثال آحر على ملف 01× مختلف نسبيا على الملف الأول: 


SPXML VEESION=T"I OT > 
<vente> 
Kartiicless 
<article code="1"> 
<libelle>clavier</libelle> 
attic leE 


a 
1 ا‎ 


AE 1C li 


سنقوم الآن بشرح هذا الملف: 
كما سبق أن قلنا فالسطر الأول يعلم المتصفح بأن الشفرة الي نريد تنفيذها عبارة عن ا۷1×. 
السطر الثاني عبارة عن إعلان للجذر وهو 6 و کما تری به نبدأً وبه نختم. 


السطر اللات ثل الإعلان عن العنصر Articles‏ الف بدو ره يتوفر على عناصر فرعية. 


السطر الرابع <"1"=عC04€‏ ع|٣1٣٣ه>‏ يقدم لنا مفهوما حديدا يطلق عليه اسم الخاصية اںطا٣ ۸٤‏ ويكون 


متصلا بالعنصر» كما هوالحال مع 1۲۷1 بحيث جحد بعض الوسوم تتوفر على خحصائص مرتبطة ا كما يعرض 
ها 


<font color="Red'"> Ce texte sera coloré en rouge </font> 


أما باقي سطور ال ملف فكتبت بطريقة عادية بحيث نفتح الوسم ونقفله ماعدا السطر الأحضر: 


فكما تلاحظ هذا الوسم أو هذا العنصر لا يتوفر على وسم حتام ولا على محتوى» غير أن ما ميزه عن باقي 


| 
| 
| 
1 
| 
1 
الوسوم هو احتواؤه لرمز القسمة / عند ماية السطر....وذلك هو السر ! 


شض الا 


<libelle><libel1le/> 


ری ات ارال اله فا ارت رل 
التعاليق في ×X“11‏ 


الغرض من التعاليق أو التعلیقات ءا" me‏ entaires/comمComm‏ ہو السماح للمبرمج بوضع نص غریب عن 


لغة البرجحة من أحل شرح بعض الشفرات أو من أحل تذكرها. 


arabic formatlon 


لحتابة التعاليق يجب مراعاة الصيغة التالية: 


مفهرم (010: 


من فوائد 0۲0 أنه بمكننا من تنظيم شفرة 01× بحيث من خلاله نستطيع تحديد عناصر ملف 1× وعددها 


وترتيبها وماإلى ذلك. 


إن كنت على اطلاع بقواعد البيانات فستفهم أهمية 0۲0 بحيث أنه يضمن لملف ۷1× القواعد والشروط ال 


بجحب أن يحترمها» كعدد تكرار بعض العناصر وقيمها الإفتراضية. 
هناك نوعان من 0۲٥‏ الأول داحلي nterneا‏ والاخحر خحارحي Externe‏ : 
DD .1‏ داحلى 


ویکون داحل ملف xml‏ وصیغته کالتال: 


<!DOCTYPE Racine | 


Liste des éléments. 
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` APBE LION 


۰ 
+ 


بحيث ۵٣ء8‏ هو الجحذر الرئيسي» ثم يأ بين المعقوفتين سرد العناصر والخصائص. 
أي إذا اردنا أن ندشيء 0۲0 مناسب للف ۷1× الذي سبق وآنشأناه فسیکون كما يلى: 


SK PEML VEST gOS 
. CIBOCTTTE TELE 
„.. <ELEMENT vente l(aflticles)=2 
<I ELEMENT AFLICLSGS Ar LIClET) SS 
. IELEMENT article (code; libelle) s> 
. <IELEMENT Code (FPLCDATANS 
. <ITELEMENT libel le PCDATA 
MNE 
<vente> 
<articles> 


<articlez 


السطر الثان هو بداية 010 ويكون مرفقا بالجذر. 
السطر الثالث يضم العنصر الذي يأ مباشرة تحت الجذر. 


السطر الرابع يضم العنصر الفرعي ووضعنا أمامه علامة زائد + كي نسمح بتكرار العنصر أكثر من مرة» 
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rf 


(code,libelle) :iم‎ (and تعن (أيضا‎ 


تعێٰ(أو )0٣‏ متلا (code libelle)‏ 
أن هذا العنصر احتياري iaڵ)?libelle‏ , (code‏ 


تعن واحد أو Îکiر‏ Iaڵ (code,libelle+)‏ 


تعن آي رقم من صفر فما فوق مثلا (*ع |ام طا ,مdهء)‏ 


<!ELEMENT code (#PCDATA)> 


فيعنٰ أن العنصر الفرعي مء مکن أن يضم بيانات من نوع حرق او رقمي. 


ويكون بنفس صيغة 0۲0 الداحلي إلا أنه لايضم سطر البداية: 


<! DOCTYPE vente [ 


نقوم بكتابة نفس الأسطر ونحفظ الملف بامتداد 010. كما يعرض المغال التالي: 


COSM LVEF SLOT TI 

<!ELEMENT vente (articles) > 

SIBLE MENL ETC ESET OLESEN 
SUELEMENTrat EE leu teEoOdere libe lale )ız 


1 
TT MOA 
| 1 | د‎ 


E 


arabic formation 


تم ننادي عليه من داحل ملف 01× بالطريقة التالية: 


Mlr Vero LoR STOTT 
<!'DOCTYPE vente SYSTEM "fichier.dtd"> 
<vente> 
<articles> 
<arElCLe> 
EOE lece 
<libelle>clavier</Libellez> 


LT 
E 


نحیث ۷٥٣٥‏ هو اسم الحجذر و ل٤.٣eاc۸ا؟‏ هو اسم ملف 0۲0. 


إذا ۾ يكن ملف 010 متواحدا مع ملف 1× ف نفس الحلد يتوحب عليك أن تحتب مسار ملف 010 


کاملا. 

إظهار 1× بواسطة :CSS‏ 

کما تری فشكل 1× على المتصفح غیر حذاب ..... © أردت قوما من الأولء فهو بشع !!!! 
لا تزعج فيمكننا التحكم عظهر وسوم 1× كما نرید إما من خلال ٥55‏ أو من خلال ا5×. 


إن كنت تسمع لأول مرة ب (ئاععم؟ مارSt‏ عascadin) »S5‏ فهي عبارة عن لغة تستخدم غالبا مع 1۲۷1 
من أجل تحسين عرض الصفحة وشكل مختواها. 


الآن سننشئ ملف 55 الذي سيسمح لنا بتغيير هيئة ملف ا١××:‏ 


o. 


ا 


1 


arabic formatlon 


` APBE LION 


DOCKET TOLE SLL, 
JALE DLA VE DISC, 

COLGSE EEUU 

EOL TILE OMEGA, 
COE CE EE Eg 


کما تری وضعنا العناصر ال نرغب ق تغيير شکل إظهارهاء وهي العنصر مهه و هاامطاا» بعد ذلك نقوم 


بحفظ الملف بامتداد .٤055‏ ثم ندرجه داحل ملف ۷1× كما يلي: 


SRM VEFELONST lg OT 
<?xml-stylesheet href="css.css" type="text/css"?> 
CI DOCTTEFE VEN LENSISILEM TOKIO 
I EE 
CatTIClESS 
articles 
Code 1l Code. 
<libelle>clavier</libelle> 


E 1 


عند الحفظ والولوج إلى ملف ۷1× فإن النتيجة ستكون كما يلي: 


17 


D:\Mes Pro jets\l Î [اسلسلة كن‎ es chapitres de XML Mile xml - Windows Internet Explorer 


کے 2 کن 
20g‏ کا FÎ DiMes Projetsliwl jû ةlwlw Les chapitres de #MLIFilE xml‏ | 7 ا ا 


Fichier Edition #Affichage Favoris Outils ? 


TF | Dimes Projets gã ãlwlwiLes chapitres de XML... ص‎ a 5 چ‎ | Page ن‎ TF outils 


clavier 


Souris 


Terminê ا‎ Paste de traYail R100 * 


déêmarrer ا‎ 


أعتقد أنك أد ركت أهمية لغة C55‏ بعد رؤية النتيجة» إن كان الأمر كذلك فحاول أن تبدع مظهرا حدیدا من 
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: 1 arabic formallon 
1 
| 
| 
1 
[ 
| 


u 
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„TBE LION 


إظهار 11× بواسطة :×XS1‏ 


1 هو نوع من اللغات الي تمتم مظهر البيانات» تماما ك C55‏ إلا أنه يتوافق مع 1× أحسن من »C55‏ بحيث 


يقوم بتحويل ۷1× إلى ا1۲۷1 بطريقة خلابة. 
سننشيع ملف 51× أولا وبعدها نقوم بإدراحه داحل ملف 1× حي نتأمل النتيجة. 
هذا مثال على ملف ا5×: 


OF XML YETSION="l. U> 
<ES1:stvlesheet XMLINS:XSI="hlCILD: / (WWW. WS. OEG/ TRIWD=-KS1"5 
<xsl:template match="/"> 
SINEM 
BoY 
HO STIISEE Ie SwaATTICLESE DS 
STaADLEBOEQEE=T II WIGERN=TIOO TE 
CTT BDOCOlOT TEI 
TIO 
OG 
E 
<xsl:for-each select="vente/articles/article"> 
ERE 
Ee 
<xsl:value-of select="code"/> 
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والاآن LL‏ شرح هذه الشفرة: 


SEDE SS eas 


لغة 51× مشتقة من ۸1× هذا هما نفس المقدمة. 


e e DOS ORD Sl‏ ا وه هو اا 


هذا السطر هو البداية الحقيقية ل 51× بحيث خخبر المتصفح بأن ما سيتم عرضه عبارة عن 51× أما اللخاصية 


.Namespace sll J فتسمى‎ xm: sا‎ 


<xsl:template match="/"> 


الخاصية ءاه" الي تأحذ القيمة / ترمز إلى حذر الملف اص× أي أن المعالحة ستبدأً من الجذر تم تمتد إلى باقي 


ر 


تبقى من الكود عبارة عن كود ا1١1۲‏ ماعدا الوسم التالي: 


SSE O aS a aE e EA Ela alls 


وهي حلقة تكرارية معناها حلب كل عنصر فرعي متواجد تحت العنصر اأ . 


O ETT TCT OEE O EATEN Oe oN 


BE LION 


arabıc formatlon 


f 


eee Mee 


فقط أريد تنبيهك إلى احترام الترتيب وعدم الخلط بين الوسوم» أو كتابة إحدى العناصر بشكل خاطي» إن 


اتبعت نفس الغطوات الي قمنا ها فستحصل على النتيجة التالية: 


U: \Mes Pro jets\l Î [اسلسلة كن‎ es chapitres de XML Mile xml - Windows Internet Explorer 


NaN” E Dimes PrajeksllawÎ gıã ةLwlwkLes‎ chapikres de #MLIFile xml 


ایتا 
Fichier Edition #Affichage Favoris utils ?‏ 

3 1 : ج 
TF a Dies PrajekslsiwÎ ıJ êlwlwî Les chapitres de XML... | i 1 F Page + GF Oukils <‏ 


Liste des articles 


Terminê ا‎ Paste de traYail R100 x” 


"J dêmarrer 


إن حصلت على خط فالمر حو مراجعة ملفي ا× و ائ×» ومراقبة حالة الأحرف وترتيب الوسوم وسلامة 


الشفرةء إن ظل الخطاً قائما فا مر حو مراسلي عبر الإبعيل عن طريق بعث صورة الخطاً وأي ملاحظات ثانوية. 
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يعكنك 51× من القيام مجموعة من العمليات الرائعة» مثل حلب المعلومات بشرط» أو بترتيب معين وغيرها من 


وسنستعرض هنا أهم هاته العمليات: 


سنقوم أولا بإنشاء ملف ا۷× حديد وسنطبق عليه هاته العمليات. 


العملية الأولى: جلب كل الأشخاص بدون شرط: 


<IML. VEFSLOR=T OT > 
<Homme> 
<Personne> 
<Person [ID="1"> 
COM EHA NOME 
<FrEenoMmMzSiMO</PLrENONMZ 
<Age>20</Age> 
< /BPersOR 
<PerSON IDSs 
TOM MAT EOUL MM 
<PIEéEnNoM Hamid Pre oMz 
<Age>20</Age> 
< /PérSONZ 


ا 


. 
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PE 0N 


< TXML YeErsion="] U?2 
THSLSEVLSSHESTE OINSTKRSLSPDTULDT 7 NUS. OLO TRI WND RSI > 
<xS1L;:template mMatceh="/ "> 
DIMS 
SBDOQYa 
<h3>Tous Les personnes</h3> 
<Eable Tore ICICI LOOT TS 
EI 
E MO ES 
Td Prelim ld. 
TOE U. 
e a 
ITT CETTE MRE CET CNET 
ENA 
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العملية الثانية: جلب كل الأشخاص مرتبين حسب الأماء: 


سنقوم فقط بتعو يض سطر ۴٥۲-٥۵٥۲١‏ بالسطر التالي: 


لاحظ معي ترتيب الأسماء كيف تغير تزايديا. 


العملية الغالنة: جلب الأشخاص الذين يبحملون إسم لكأاج؟»: 


op. 


7۳ 


<xsl1l:stylesheet xmlns:xsl="Http:/ /WWW.W3.OFG/TR/WD=xs81"> 
<xSl:template match="/"> 
SCM 
PHO 
TT TES CONIC MNS 
<table border="1" width="100%"> 
Ea 
EON OO 
CEI PEM EE. 
r 
<xsl:for-each select="Homme/Personne/Person [Prenom=' Khalid' ] "> 
Ea, 
TE 


۱ arabic formatlon 
1 
1 
| 
1 
| 
1 
1 


بمكنك القيام بالعديد من العمليات على بيانات ۷1× عن طريق ملف ا5× . 


سنكتفى بهذا القدر آملين أن نكون قد وفقنا ف توصيل الرسالة. 
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| O E 
| 
1 
| 
1 
| 
[ 
1 


